<!--
 * @Author: 莫卓才
 * @eMail: handsome.mo@foxmail.com
 * @Descripttion: 描述
 * @version: 1.0.0
 * @Date: 2020-02-20 18:16:13
 * @LastEditors: 莫卓才
 * @LastEditTime: 2020-06-12 19:30:14
 -->

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">文章标题</label>
    <div class="layui-input-inline" style="width: 450px;">
      <script type="text/html" template>
        <input type="text" name="title" value="{{ d.params.title || '' }}" lay-verify="required" placeholder="文章标题" autocomplete="off" class="layui-input">
      </script>
    </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">文章状态</label>
        <div class="layui-input-inline">
            <script type="text/html" template>
                <input type="checkbox" lay-filter="status" name="status" lay-skin="switch" lay-text="显示|隐藏" {{ d.params.status != 0 ? 'checked' : '' }} >
            </script>
        </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">关键字</label>
    <div class="layui-input-inline" style="width:160px;">
      <script type="text/html" template>
        <input type="text" name="keywords" value="{{ d.params.keywords || '' }}" lay-verify="required" placeholder="关键字" autocomplete="off" class="layui-input">
      </script>
    </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">文章来源</label>
        <div class="layui-input-inline" style="width: 450px;">
            <script type="text/html" template>
        <input type="text" name="source" value="{{ d.params.source || '' }}" placeholder="来源" autocomplete="off" class="layui-input">
      </script>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-inline">
            <script type="text/html" template lay-url="/api/news/getCategoryList" lay-done="layui.form.render('select');"
        lay-data="{'lang': layui.data('lang').lang}">
        <select name="category_id" id="category_id" required>
             <option value="">请选择</option>
              {{# layui.each(d.data,function(index,item){ }}
                <option value="{{ item.id }}" {{ item.name === d.params.category_name ? 'selected' : '' }}>{{ item.name }}</option>
              {{# }); }}
        </select>
       </script>
        </div>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-inline" style="width: 450px;">
      <script type="text/html" template>
      <textarea name="description" placeholder="" class="layui-textarea">{{ d.params.description || '' }}</textarea>
      </script>
    </div>
  <div class="layui-inline">
    <label class="layui-form-label">缩略图</label>
    <div class="layui-input-inline" style="width: 345px;">
      <script type="text/html" template>
        <input type="text" name="thumb" id="thumb" value="{{ d.params.thumb || '' }}"  placeholder="请上传图片" autocomplete="off" class="layui-input" >
      </script>
    </div>
    <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-thumb">上传图片</button>
  </div>
  </div>
  <script type="text/html" template>
    {{#
      if(d.params.thumb!=''&&d.params.thumb!=undefined&&d.params.category_id!=3){
    }}
      <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-inline" style="width: 100px;">
          <img src="{{ d.params.thumb }}" height="60">
        </div>
      </div>
    {{#
      }
    }}
  </script>
  <div class="layui-form-item">
    <label class="layui-form-label">文章内容</label>
    <div class="layui-input-inline" style="margin-bottom: 20px; width: 80%;">
    <!--  <script id="editor" type="text/plain"></script>-->
    <textarea id="container" name="container" lay-verify="content" style="display: none;"></textarea>
    </div>

    <!-- <div class="layui-form-item">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-inline">
        <script type="text/html" template>
          <input type="text" name="sort" value="{{ d.params.sort || '' }}" placeholder="排序" autocomplete="off" class="layui-input">
        </script>
      </div>
    </div> -->

    <!-- <div class="layui-form-item">
      <label class="layui-form-label">时间</label>
      <div class="layui-input-inline">
        <script type="text/html" template>
          <input type="text" name="create_time" value="{{ d.params.create_time || '' }}" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input"  id="test5" onclick="createTime()">
        </script>
      </div>
    </div> -->

    <script type="text/html" template>
    <input type="hidden" name="id" value="{{ d.params.id || '' }}">
  </script>

    <script type="text/html" template>
    <input type="hidden" name="lang" value="{{ layui.data('lang').lang }}">
  </script>

    <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-inline">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
      </div>
    </div>
  </div>
  </form>
  <script src="/static/ace/ace.js"></script>
  <script>
    layui.use(['admin', 'form', 'upload', 'laydate','layedit'], function () {
      var $ = layui.$
        , form = layui.form
        , upload = layui.upload
        , laydate = layui.laydate
        , layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: '/api/uploads/thumb/column/news',
                type: 'post'
            },
            calldel: {
                url: '/api/uploads/delnews_test',
                type: 'post'
            }
            , tool: [
                'html',  //显示源码
			    'undo',  //撤销
			    'redo',  //重做
			    'strong',  //加粗
			    'italic',  //斜体
			    'underline',  //下划线
			    'del',  //删除线
			    'left',  //左对齐
			    'center',  //居中对齐
			    'right',  //右对齐
			    'table',  //插入表格
			    '|',
			    'link',  //插入超链接
			    'unlink',  //删除超链接
			    'code',  //插入代码
			    'image',  //图片上传
			 //   'images',  //多图上传
			 //   'image_alt',  //图片
			    'video',  //插入视频
			    'attachment',  //插入附件
			    'colorpicker',  //字体颜色
			    'fontBackColor',  //字体背景颜色
			    'fontFomatt',  //段落格式
			    'fontfamily',  //字体
			    'fontSize',  //字体大小
			    'lineHeight',  //间距
			    'face',  //表情
			    'addhr',  //添加水平线
			    'anchors',  //添加锚点
			 //   'customlink',  //添加自定义链接
			    '|',
			    'preview',  //预览
			    'removeformat',  //清除文字样式
			    'fullScreen',  //全屏
			    'help'  //帮助
            ]
        });
        var index = layedit.build('container');
        form.verify({
            content:function(value){
                return layedit.sync(index);
            }
        });
      //日期时间选择器
      upload.render({
        elem: '#layuiadmin-upload-thumb'
        , url: '/api/uploads/thumb/column/news'
        , accept: 'file'
        , method: 'get'
        // ,acceptMime: 'image/*'
        , done: function (res) {
            if(res.code === 0){ //返回验证 0为成功
                $(this.item).prev("div").children("input").val(res.data.src)
                layer.msg(res.msg, {icon: 6});
                console.log(res.data.src);
            }else{
                layer.msg(res.msg, {icon: 5});
                // console.log(res.msg);
            }
        }
      });
      form.on('radio(status)', function (data) {
        // console.log(data.elem); //得到radio原始DOM对象
        console.log(data.value); //被点击的radio的value值
      });
    })
    function createTime() {
      var laydate = layui.laydate;
      laydate.render({
        elem: '#test5'
        , type: 'datetime'
        , show: true
      });
    }

  </script>